
<!DOCTYPE html>
<!-- (C) 2013-present  SheetJS http://sheetjs.com -->
<!-- vim: set ts=2: -->
<html>
<head>
<title>SheetJS JS-XLSX In-Browser HTML Table Export Demo</title>
<meta charset="utf-8" />
<style>
.xport, .btn {
	display: inline;
	text-align:center;
}
a { text-decoration: none }
#data-table, #data-table th, #data-table td { border: 1px solid black }
</style>
</head>
<body>

<script type="text/javascript" src="./xlsx.core.min.js"></script>
<script type="text/javascript" src="./xlsxStyle.core.min.js"></script>
<script type="text/javascript" src="./xlsxStyle.utils.js"></script>
<script type="text/javascript" src="./FileSaver.js"></script>


<!--[if lte IE 9]>
<script type="text/javascript" src="shim.min.js"></script>
<script type="text/javascript" src="xlsx.full.min.js"></script>

<script type="text/javascript" src="Blob.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<![endif]-->

<!--[if lte IE 9]>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="downloadify.min.js"></script>
<script type="text/javascript" src="base64.min.js"></script>
<![endif]-->

<script>
function doit(type, fn, dl) {
	var elt = document.getElementById('data-table');
	
	//workbook例子
	var wb1 = XLSX.utils.table_to_book(elt, {sheet:"Sheet JS"});

	var wb2 = {"SheetNames":["Sheet JS"],"Sheets":{"Sheet JS":{"A1":{"v":"id"},"B1":{"v":"合并的列头1","s":{"font":{"sz":14,"bold":true,"color":{"rgb":"FFFFAA00"}},"fill":{"bgColor":{"indexed":64},"fgColor":{"rgb":"FFFFFF00"}}}},"C1":{"v":"合并的列头2"},"D1":{"v":"合并的列头3"},"E1":{"v":"合并的列头4"},"A2":{"v":"id"},"B2":{"v":"合并的列头1"},"C2":{"v":"合并的列头2"},"D2":{"v":"合并的列头3"},"E2":{"v":"合并的列头4"},"A3":{"v":"id"},"B3":{"v":"合并的列头1"},"C3":{"v":"合并的列头2"},"D3":{"v":"合并的列头3"},"E3":{"v":"合并的列头4"},"A4":{"v":1},"B4":{"v":"数据11"},"C4":{"v":"数据12"},"D4":{"v":"数据13"},"E4":{"v":"数据14"},"A5":{"v":2},"B5":{"v":"数据21"},"C5":{"v":"数据22"},"D5":{"v":"数据23"},"E5":{"v":"数据24"},"!merges":[{"s":{"c":1,"r":0},"e":{"c":4,"r":0}}],"!ref":"A1:E5"}},"SSF":{"0":"General","1":"0","2":"0.00","3":"#,##0","4":"#,##0.00","9":"0%","10":"0.00%","11":"0.00E+00","12":"# ?/?","13":"# ??/??","14":"m/d/yy","15":"d-mmm-yy","16":"d-mmm","17":"mmm-yy","18":"h:mm AM/PM","19":"h:mm:ss AM/PM","20":"h:mm","21":"h:mm:ss","22":"m/d/yy h:mm","37":"#,##0 ;(#,##0)","38":"#,##0 ;[Red](#,##0)","39":"#,##0.00;(#,##0.00)","40":"#,##0.00;[Red](#,##0.00)","45":"mm:ss","46":"[h]:mm:ss","47":"mmss.0","48":"##0.0E+0","49":"@","56":"\"上午/下午 \"hh\"時\"mm\"分\"ss\"秒 \"","65535":"General"},"Props":{"SheetNames":["Sheet JS"],"Worksheets":1,"Application":"SheetJS"}};

	var wb3 = {"SheetNames":["Sheet JS"],"Sheets":{"Sheet JS":{"A1":{"t":"s","v":"This"},"B1":{"t":"s","v":"is"},"C1":{"t":"s","v":"a"},"D1":{"t":"s","v":"Test"},"A2":{"t":"s","v":"வணக்கம்"},"B2":{"t":"s","v":"สวัสดี"},"C2":{"t":"s","v":"你好"},"D2":{"t":"s","v":"가지마"},"A3":{"t":"n","v":1},"B3":{"t":"n","v":2},"C3":{"t":"n","v":3},"D3":{"t":"n","v":4},"A4":{"t":"s","v":"Click"},"B4":{"t":"s","v":"to"},"C4":{"t":"s","v":"edit"},"D4":{"t":"s","v":"cells"},"!ref":"A1:D4","!merges":[{"s":{"c":0,"r":0},"e":{"c":0,"r":1}}]}}}

	var wb4 = {"SheetNames":["Sheet JS"],"Sheets":{"Sheet JS":{"A1":{"v":"日期"},"B1":{"v":"配送信息"},"B4":{"v":"测试"},"C4":{"v":"测试2"},"C1":{"v":""},"D1":{"v":""},"E1":{"v":""},"F1":{"v":""},"A2":{"v":""},"B2":{"v":"姓名"},"C2":{"v":"地址"},"D2":{"v":""},"E2":{"v":""},"F2":{"v":""},"A3":{"v":""},"B3":{"v":""},"C3":{"v":"省份"},"D3":{"v":"市区"},"E3":{"v":"地址"},"F3":{"v":"邮编"},"!merges":[{"s":{"c":1,"r":0},"e":{"c":5,"r":0}},{"s":{"c":2,"r":1},"e":{"c":5,"r":1}},{"s":{"c":0,"r":0},"e":{"c":0,"r":2}},{"s":{"c":1,"r":1},"e":{"c":1,"r":2}}]}},"SSF":{"0":"General","1":"0","2":"0.00","3":"#,##0","4":"#,##0.00","9":"0%","10":"0.00%","11":"0.00E+00","12":"# ?/?","13":"# ??/??","14":"m/d/yy","15":"d-mmm-yy","16":"d-mmm","17":"mmm-yy","18":"h:mm AM/PM","19":"h:mm:ss AM/PM","20":"h:mm","21":"h:mm:ss","22":"m/d/yy h:mm","37":"#,##0 ;(#,##0)","38":"#,##0 ;[Red](#,##0)","39":"#,##0.00;(#,##0.00)","40":"#,##0.00;[Red](#,##0.00)","45":"mm:ss","46":"[h]:mm:ss","47":"mmss.0","48":"##0.0E+0","49":"@","56":"\"上午/下午 \"hh\"時\"mm\"分\"ss\"秒 \"","65535":"General"},"Props":{"SheetNames":["Sheet JS"],"Worksheets":1,"Application":"SheetJS"}};

	//导出格式设置
	var wopts = { bookType:'xlsx', bookSST:false, type:'binary' };

	//test
	var wb = wb1;
	console.log(wb);
	var sheetName = wb.SheetNames[0];
	utilsTest(wb);
	//使用xlsxStyle.utils（XSU）对Workbook进行样式自定义
	function utilsTest(wb){
		XSU.mergeCells(wb,sheetName,"A1","B1");
		XSU.mergeCellsByObj(wb,sheetName,[{s: {c: 0, r: 2},e: {c: 0, r: 3}}]);
		//setColWidth(wb,sheetName,[{wpx: 45}, {wpx: 165}, {wpx: 45}, {wpx: 45}]);
		
		XSU.setFillFgColorRGB(wb,sheetName,"B4","FFB6C1");
		//setFillBgColorRGB(wb,sheetName,"B4","FFB6C1");
		
		XSU.setFontSize(wb,sheetName,"B4",60);
		XSU.setFontColorRGB(wb,sheetName,"B4","00BFFF");
		XSU.setFontBold(wb,sheetName,"B4",true);
		XSU.setFontUnderline(wb,sheetName,"B4",true);
		XSU.setFontItalic(wb,sheetName,"B4",true);
		XSU.setFontStrike(wb,sheetName,"B4",true);
		XSU.setFontShadow(wb,sheetName,"B4",true);
		XSU.setFontVertAlign(wb,sheetName,"B4",true);
		
		XSU.setAlignmentVertical(wb,sheetName,"B4","top");
		XSU.setAlignmentHorizontal(wb,sheetName,"B4","center");
		
		XSU.setBorderTopDefault(wb,sheetName,"B4");
		XSU.setBorderRightDefault(wb,sheetName,"D3");
		XSU.setBorderDefault(wb,sheetName,"C4");
		
		console.log(wb);

		XSU.setBorderDefaultAll(wb,sheetName);
		XSU.setTitleStylesDefault(wb,sheetName);
		XSU.setEvenRowColorGrey(wb,sheetName);
	}

	//转换成二进制 使用xlsx-style（XS）进行转换才能得到带样式Excel
	var wbout = xlsxStyle.write(wb,wopts);
	//保存，使用FileSaver.js
	return saveAs(new Blob([XSU.s2ab(wbout)],{type:""}), "test.xlsx");

	/*return dl ?
		XLSX.write(wb, {bookType:type, bookSST:true, type: 'base64'}) :
		XLSX.writeFile(wb, fn || ('test.' + (type || 'xlsx')));*/
}
</script>
<pre><h3><a href="//sheetjs.com/">SheetJS</a> JS-XLSX In-Browser HTML Table Export Demo</h3>
<b>Compatibility notes:</b>
- Editable table leverages the HTML5 contenteditable feature, supported in most browsers.
- IE6-9 requires ActiveX or Flash to download files.
- iOS Safari file download may not work. <a href="http://git.io/ios_save">This is a known issue</a>.

<b>Editable Data Table:</b> (click a cell to edit it)
</pre>
<div id="container"></div>

<script type="text/javascript">
/* initial table */
var aoa = [
	["This",   "is",     "a",    "Test"],
	["வணக்கம்", "สวัสดี", "你好", "가지마"],
	[1,        2,        3,      4],
	["Click",  "to",     "edit", "cells"]
];

//使用js-xlsx（JX）的方法将表格转换为workbook
var ws = XLSX.utils.aoa_to_sheet(aoa);
var html_string = XLSX.utils.sheet_to_html(ws, { id: "data-table", editable: true });
document.getElementById("container").innerHTML = html_string;
</script>

<br />
<pre><b>Export it!</b></pre>
<table id="xport">
<tr><td><pre>XLSX Excel 2007+ XML</pre></td><td>
	<p id="xportxlsx" class="xport"><input type="submit" value="Export to XLSX!" onclick="doit('xlsx');"></p>
	<p id="xlsxbtn" class="btn">Flash required for actually downloading the generated file.</p>
</td></tr>
<tr><td><pre>XLSB Excel 2007+ Binary</pre></td><td>
	<p id="xportxlsb" class="xport"><input type="submit" value="Export to XLSB!" onclick="doit('xlsb');"></p>
	<p id="xlsbbtn" class="btn">Flash required for actually downloading the generated file.</p>
</td></tr>
<tr><td><pre>XLS Excel 97-2004 Binary</pre></td><td>
	<p id="xportbiff8" class="xport"><input type="submit" value="Export to XLS!"  onclick="doit('biff8', 'test.xls');"></p>
	<p id="biff8btn" class="btn">Flash required for actually downloading the generated file.</p>
</td></tr>
<tr><td><pre>ODS</pre></td><td>
	<p id="xportods" class="xport"><input type="submit" value="Export to ODS!"  onclick="doit('ods');"></p>
	<p id="odsbtn" class="btn">Flash required for actually downloading the generated file.</p>
</td></tr>
<tr><td><pre>Flat ODS</pre></td><td>
	<p id="xportfods" class="xport"><input type="submit" value="Export to FODS!"  onclick="doit('fods', 'test.fods');"></p>
	<p id="fodsbtn" class="btn">Flash required for actually downloading the generated file.</p>
</td></tr>
</table>
<pre><b>Powered by the <a href="//sheetjs.com/opensource">community version of js-xlsx</a></b></pre>

<script type="text/javascript">
function tableau(pid, iid, fmt, ofile) {
	if(typeof Downloadify !== 'undefined') Downloadify.create(pid,{
			swf: 'downloadify.swf',
			downloadImage: 'download.png',
			width: 100,
			height: 30,
			filename: ofile, data: function() { return doit(fmt, ofile, true); },
			transparent: false,
			append: false,
			dataType: 'base64',
			onComplete: function(){ alert('Your File Has Been Saved!'); },
			onCancel: function(){ alert('You have cancelled the saving of this file.'); },
			onError: function(){ alert('You must put something in the File Contents or there will be nothing to save!'); }
	}); else document.getElementById(pid).innerHTML = "";
}
tableau('biff8btn', 'xportbiff8', 'biff8', 'test.xls');
tableau('odsbtn',   'xportods',   'ods',   'test.ods');
tableau('fodsbtn',  'xportfods',  'fods',  'test.fods');
tableau('xlsbbtn',  'xportxlsb',  'xlsb',  'test.xlsb');
tableau('xlsxbtn',  'xportxlsx',  'xlsx',  'test.xlsx');

</script>

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36810333-1']);
  _gaq.push(['_setDomainName', 'sheetjs.com']);
  _gaq.push(['_setAllowLinker', true]);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>


</body>
</html>
